<!-- 首页 -->
<template>
  <div class="avater-box" @click="avaterClick">
    <div class="avater-img">
      <van-image fit="cover" :src="state.isLogin ? state.userInfo.avatar : state.icon_hand" alt="" />
    </div>
    <span v-if="state.isLogin">{{ state.userInfo.nickname }}</span>
    <span v-else>未登录</span>
  </div>
</template>
  <script setup>
import { reactive, toRefs } from "vue";

import { useRoute, useRouter } from "vue-router";

import icon_hand from "@/assets/image/icon_hand2.png";
const route = useRoute();

const state = reactive({
  icon_hand,
  userInfo: {
    nickname: "",
    avatar:"",
  },
  isLogin: false,
});

const router = useRouter();

// 判断用户是否登录
if (localStorage.getItem("userInfo")) {
  state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  state.isLogin = true
}

const avaterClick = () => {
  let name = state.isLogin ? "personage" : "login";
  router.push({
    name,
  });
};
</script>
  
  
  
  <style lang="scss" scoped>
.avater-box {
  display: flex;
  align-items: center;
  .avater-img {
    width: 32px;
    height: 32px;
    border-radius: 40px;
    overflow: hidden;
    margin-right: 10px;
    .van-img {
      width: 100%;
    }
  }
}
</style>
  